<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="UTF-8" />
		<title></title>
		<style>
			canvas {
				position: absolute;
				z-index: -1;
				width: 100%;
				height: 100%;
				margin: 0;
			}
			
			
			.loginDiv {
			    position: absolute;
			    left:50%;
			    top:50%; 
			
				margin-left:-164px;
				margin-top: -170px; 
				width: 328px;
			}
			
			.loginTitle {
				margin: 0;
			    background-image: url(../img/login_title.png);
				background-repeat: no-repeat;
				height: 40px;
				width: 328px;
				font-family: "仿宋";
				font-size: 18px;
				letter-spacing: 1px;
				color: #484848;
				padding: 16px 0px 0px 0px;
				text-align: center;
			}
			
			.login {
				
				background-image: url(../img/login_bg.png);
				background-repeat: repeat-y;
				height: 290px;
				padding: 0;
				margin: 0;
			}
			
			.login li {
				list-style: none;
				float: left;
				width: 300px;
			}
			
			.i_login_bottom {
				height: 14px;
				width: 328px;
				background-image: url(../img/login_foot.png);
				background-repeat: no-repeat;
			}
			
			.usernameInput {
				background-image: url(../img/username.png);
				width: 210px;
				height: 45px;
				display: block;
				margin: 20px 0px 0px 0px;
				color: #666;
				padding: 0px 0px 0px 50px;
				font-family: "仿宋";
				font-size: 16px;
				line-height: 45px;
				border-style: none;
			}
			
			.passwordInput {
				background-image: url(../img/password.png);
				width: 210px;
				height: 46px;
				border-style: none;
				margin: 0px 0px 10px 0px;
				font: 16px 仿宋;
				color: #666;
				padding: 0px 0px 0px 50px;
				line-height: 46px;
			}
			
			.remember {
				font: 14px 仿宋;
				color: #666;
				margin: 0px 0px 10px 0px;
			}
			
			
			.login_bt {
				border: none;
				width: 260px;
				height: 44px;
				background: url(../img/login_bt.png) no-repeat center;
				font-family: "仿宋";
				font-size: 18px;
				color: #FFFFFF;
				text-decoration: none;
				text-align: center;
				padding: 0px;
			}
			
			.login_bt:hover {
				color: #fffc0e;
				text-decoration: none;
				font-family: "仿宋";
			}
		</style>
		<script src="../require/require.js"></script>
		<script src="../require/require-config.js"></script>
		<script>
		    /*<![CDATA[*/
			require(['jquery', 'jqxbuttons'], function() {

				var canvas, pen, mousePoint, lines = [];
				var canvsaSize = function() {
					canvas.height = $("#canvas").height();
					canvas.width = $("#canvas").width();
				}
				window.onmousemove = function(e) {
					e = e || window.event;
					mousePoint.x = e.clientX;
					mousePoint.y = e.clientY;
				};
				window.onmouseout = function(e) {
					mousePoint.x = null;
					mousePoint.y = null
				};
				window.onresize = canvsaSize;
				var initLines = function() {
					for(var u = 0; u < 300; u++) {
						var m = Math.random() * canvas.width;
						var l = Math.random() * canvas.height;
						var w = Math.random() * 2 - 1;
						var d = Math.random() * 2 - 1;
						lines.push({
							x: m,
							y: l,
							xa: w,
							ya: d,
							max: 5e3
						})
					}
				}
				var animation = function() {
					return window.requestAnimationFrame ||
						window.webkitRequestAnimationFrame ||
						window.mozRequestAnimationFrame ||
						window.oRequestAnimationFrame ||
						window.msRequestAnimationFrame ||
						function(n) {
							window.setTimeout(n, 1e3 / 60);
						}
				}
				var moveLines = function() {
					pen.clearRect(0, 0, canvas.width, canvas.height);
					var arr = [mousePoint].concat(lines);
					lines.forEach(function(t) {
						t.x += t.xa;
						t.y += t.ya;
						t.xa *= t.x > canvas.width || t.x < 0 ? -1 : 1;
						t.ya *= t.y > canvas.height || t.y < 0 ? -1 : 1;
						pen.fillStyle = "#fff";
						pen.fillRect(t.x - .5, t.y - .5, 1, 1);
						for(var i = 0; i < arr.length; i++) {
							var r = arr[i];
							if(t === r || r.x === null || r.y === null) continue;
							var u = t.x - r.x;
							var m = t.y - r.y;
							var l = u * u + m * m;
							var w;
							if(l < r.max) {
								if(r === mousePoint && l > r.max / 2) {
									t.x -= u * .03;
									t.y -= m * .03
								}
								w = (r.max - l) / r.max;
								pen.beginPath();
								pen.lineWidth = w / 2;
								pen.strokeStyle = "rgba(255,255,255," + (w + .2) + ")";
								pen.moveTo(t.x, t.y);
								pen.lineTo(r.x, r.y);
								pen.stroke()
							}
						}
						arr.splice(arr.indexOf(t), 1)
					});
					animation()(moveLines)
				}
				$(document).ready(function() {
					canvas = document.getElementById("canvas");;
					pen = canvas.getContext("2d");
					canvsaSize();
					mousePoint = {
						x: null,
						y: null,
						max: 2e4
					};
					initLines();
					moveLines();
				});
			});
			/*]]>*/
		</script>
	</head>
	<body style="background-image: url(../img/bg_bluemin.png);">
		<canvas id="canvas">浏览器不支持canvas</canvas>
		<div class="loginDiv">
			<div class="loginTitle">用户登录</div>
			<div class="login">
				<form action="" method="POST">
					<ul style="margin: 0;">
						<li>
							<input id="username" name="username" type="text" class="usernameInput" placeholder="用户名" value="" ></input>
						</li>

						<li>
							<input id="password" name="password" type="password" class="passwordInput" placeholder="密码" ></input>
						</li>

						<li class="remember">

							<input id="rememberMe" name="rememberMe" type="checkbox" /> <label for="rememberMe">记住我</label>

						</li>
						<li>
							<input type="submit" value="登&nbsp;录" class="login_bt"></input>
						</li>

					</ul>
				</form>
			</div>
			<div class="i_login_bottom"></div>
		</div>
	</body>
</html>